<template>
  <div>
    <a-row justify="center" class="p-1">
      <a-col :span="24">
        <Chart :options="dashboard" :showButton="false" />
      </a-col>
    </a-row>
    <a-row justify="center" :gutter="[0, 10]" class="p-1">
      <a-col :xs="24" :sm="12" :lg="12">
        <Chart :options="option" />
      </a-col>
      <a-col :xs="24" :sm="12" :lg="12">
        <Chart :options="optionT" />
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, onMounted, reactive } from "vue";
import Chart from "@/components/Chart.vue";

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const dashboard = reactive({
      tooltip: { formatter: "剩余 : {c}%" },
      series: [
        {
          type: "gauge",
          axisLine: {
            lineStyle: {
              width: 30,
              color: [
                [0.3, "red"],
                [0.7, "blue"],
                [1, "green"],
              ],
            },
          },
          pointer: {
            itemStyle: {
              color: "auto",
            },
          },
          axisTick: {
            distance: -30,
            length: 5,
            lineStyle: {
              color: "#fff",
              width: 2,
            },
          },
          splitLine: {
            distance: -30,
            length: 30,
            lineStyle: {
              color: "#fff",
              width: 4,
            },
          },
          axisLabel: {
            color: "auto",
            distance: 40,
            fontSize: 12,
          },
          detail: {
            valueAnimation: true,
            formatter: "{value} %",
            color: "auto",
            fontSize: 18,
          },
        },
      ],
    });
    const option = reactive({
      tooltip: {},
      content: "租房支出列表",
      description: "5￥/方,1.5￥/度",
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "支出列表",
          type: "pie",
          radius: [0, "50%"],
          data: [],
        },
      ],
    });
    const optionT = reactive({
      tooltip: {},
      content: "支出类型",
      description: "注意节省",
      xAxis: {
        type: "category",
        data: ["微信", "支付宝", "花呗", "银行卡"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [0, 0, 0, 0],
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
        },
      ],
    });
    function getRmbAll() {
      let expense = 0;
      proxy.$api.get("rmb/getForMonth").then((res) => {
        if (res.error === 0) {
          getRmbPayType(res.message);
          res.message.forEach((data) => {
            expense += data.amount;
          });
          dashboard.title = {
            text:
              "总量为：4000；支出：" +
              parseInt(expense) +
              " 剩余：" +
              (4000 - parseInt(expense)),
          };
          dashboard.series[0].data = [
            {
              name: "剩余",
              value: parseInt(4000 - expense) / 40,
            },
          ];
        } else message.error(res.message);
      });
    }
    function getHouseExpense() {
      proxy.$api.get("house/all").then((res) => {
        if (res.error === 0) {
          let waterCount = res.message.water.count;
          let electricityCount = res.message.electricity.count;
          let wLast = res.message.wLast.count;
          let eLast = res.message.eLast.count;
          option.series[0].data = [
            {
              value: (waterCount - wLast) * 5,
              name: "水费",
              itemStyle: { color: "blue" },
            },
            { value: (electricityCount - eLast) * 1.5, name: "电费" },
            { value: waterCount, name: "水量(方)" },
            { value: electricityCount, name: "电量(度)" },
          ];
        } else message.error(res.message);
      });
    }
    function getRmbPayType(data) {
      let wechat = 0;
      let alipay = 0;
      let flowers = 0;
      let bankCard = 0;
      data.forEach((item) => {
        if (item.payType === "0") {
          wechat += item.amount;
        } else if (item.payType === "1") {
          alipay += item.amount;
        } else if (item.payType === "2") {
          flowers += item.amount;
        } else {
          bankCard += item.amount;
        }
      });
      optionT.series[0].data[0] = wechat;
      optionT.series[0].data[1] = alipay;
      optionT.series[0].data[2] = flowers;
      optionT.series[0].data[3] = bankCard;
    }
    onMounted(() => {
      getRmbAll();
      getHouseExpense();
    });

    return { dashboard, option, optionT };
  },
  components: { Chart },
});
</script>
